<html>
  <head>
    <style>
      body {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #000;
        /* background-color: #325288; */
        padding-bottom: 20px;
      }
      .code-area {
        margin: 10px auto;
        color: #f4eee8;
      }
      .code-area textarea {
        flex: 1;
        background-color: #114e60;
        color: #f2c743;
        display: block;
      }
      .wrapper {
        display: flex;
      }
      .tips {
        flex: 0.7;
        margin: 0 20px;
        background-color: #325288;
        padding: 0 10px;
        /* color: #f5cebe; */
      }
      .tips span{color: red;}
      .btn{
        position: absolute;
        right: 20px;
        top: 2px;
        padding: 6px 16px;
        font-size: 16px;
        color: #114e60;
        background-color: #f2c743;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="btn" onclick="generate()">生成</div>
    <div class="code-area">
      <p>请输入模板的dom结构(如下格式)</p>
      <div class="wrapper">
          <textarea name="dom" id="domCode" cols="90" rows="20">
            <div>
              <YHSearch/>
               <YHButton type="primary">
                    导出
               </YHButton>
               <YHTable
                  dataSource={store.list}
                  rowKey={'title1'}/>
              </div>
          </textarea>
        <div class="tips">
          <p>输入规则：</p>
          <p>1. 只需写好dom结构，生成的tsx文件会自动引入YH-design</p>
          <p>2. 内置yh-design中的YHSearch、YHTable中的配置项，无需人工书写
          </p>
        </div>
          
        </div>

        
      </div>
    </div>

    <div class="code-area">
      <p>请输入模板的事件(如下格式)</p>
      <div class="wrapper">
        <textarea name="events" id="evtCode" cols="90" rows="20">
          [
            {
              name: 'getList',
              init: true,
              type: 'array',
              len: 5,
              dataKeys: Array(5)
                .fill(1)
                .map((_, index) => `title${index}`),
            },
          ]
         </textarea
        >
      
     
     <div class="tips">
          <p>输入规则：</p>
          <p>name：<span>(Required)</span>[String] 格式为"get[storeName]"或"submit[storeName]",[storeName]对应到组件上为:store.[storeName]</p>
          <p>type: <span>(Required)</span>[Enum] 'array'|'object' [storeName]的类型</p>
          <p>init: [Boolean] 该事件是否在组件初始化时执行</p>
          <p>len: [Number] [storeName]的数据长度</p>
          <p>dataKeys: [Array]可自定义假数据键名</p>
        </div>
    </div>
      
    </div>
    <script>
      function generate(){
        const hbs=document.getElementById('domCode').value.replace(/\n/g,'')
        const events=document.getElementById('evtCode').value.trim().replace(/\n/g,'').replace(/\s/g,'')
        fetch('http://127.0.0.1:63221/generate',{method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({hbs,events})})
        .then(d=>d.json())
        .then(r=>{
          const {status,newComName,error}=r
          if(status){
            alert('模板已生成：'+newComName)
          }else {
            alert(error)
          }
        })
        .catch(err=>{
          alert('something wrong,checkout console')
          console.log(err)
        })
      }
    </script>
  </body>
</html>